import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

import 'package:table_sticky_headers/table_sticky_headers.dart';


class TableExample extends StatefulWidget {
  @override
  _TableExampleState createState() => _TableExampleState();
}

class _TableExampleState extends State<TableExample> {
  final double headerHeight = 200;

  final ScrollController _outerController = ScrollController();
  final ScrollController _verticalController = ScrollController();
  final ScrollController _horizontalController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        controller: _outerController,
        headerSliverBuilder: (context, innerBoxIsScrolled) => [
          SliverToBoxAdapter(
            child: Container(
              height: headerHeight,
              color: Colors.blue,
              child: Center(
                child: Text(
                  "顶部 Header",
                  style: TextStyle(color: Colors.white, fontSize: 24),
                ),
              ),
            ),
          ),
        ],
        body: TablePage(
          verticalController: _verticalController,
          horizontalController: _horizontalController,
          outController: _outerController,
        ),
      ),
    );
  }
}

class TablePage extends StatelessWidget {
  final ScrollController verticalController;
  final ScrollController horizontalController;
  final ScrollController outController;

  TablePage({
    required this.verticalController,
    required this.horizontalController, required this.outController,
  });

  final List<String> _columnTitles = ['姓名', '年龄', '城市', '分数'];
  final List<String> _rowTitles =
  List.generate(100, (index) => '行 ${index + 1}');
  late final List<List<String>> _data = List.generate(
    100,
        (rowIndex) => List.generate(_columnTitles.length, (colIndex) {
      switch (colIndex) {
        case 0:
          return '姓名_${rowIndex + 1}';
        case 1:
          return '${20 + (rowIndex % 30)}';
        case 2:
          return '城市_${rowIndex % 10}';
        case 3:
          return '${(rowIndex * 5) % 100}';
        default:
          return '';
      }
    }),
  );

  @override
  Widget build(BuildContext context) {
    verticalController.addListener(() {
      print('表格垂直滚动: ${verticalController.offset}');
      outController.jumpTo(verticalController.offset);
    });
    horizontalController.addListener(() {
      print('表格水平滚动: ${horizontalController.offset}');
    });

    return StickyHeadersTable(
      onContentCellPressed: (row, col) {
        print('点击 cell: row=$row, col=$col');
      },
      legendCell: _buildCell('标题', isHeader: true),
      columnsLength: _columnTitles.length,
      rowsLength: _rowTitles.length,
      columnsTitleBuilder: (i) => _buildCell(_columnTitles[i], isHeader: true),
      rowsTitleBuilder: (j) => _buildCell(_rowTitles[j], isHeader: false),
      contentCellBuilder: (i, j) => _buildCell(_data[j][i]),
      scrollControllers:
      ScrollControllers(verticalBodyController: verticalController, horizontalBodyController: horizontalController),
      cellDimensions: CellDimensions.fixed(
        contentCellWidth: 100,
        contentCellHeight: 50,
        stickyLegendWidth: 100,
        stickyLegendHeight: 50,
      ),

    );
  }

  Widget _buildCell(String text, {bool isHeader = false}) {
    return Container(
      alignment: Alignment.center,
      decoration: BoxDecoration(
        color: isHeader ? Colors.grey[300] : Colors.white,
        border: Border.all(color: Colors.grey.shade400),
      ),
      child: Text(
        text,
        overflow: TextOverflow.ellipsis,
      ),
    );
  }
}
